Confirm?

Are you sure you want to proceed?
M
Mahesh Palanisamy

Social Media User Profile Page

Clone & Customize via AI

Tailwind User Profile renders a Blazor profile page with cover photo, avatar, stats, bio editor, tabbed nav and a responsive post grid. Demonstrates InputTextArea binding and Tailwind layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Profile header with cover photo and circular avatar. - Basic action buttons (Follow, Message) and profile statistics (Posts, Followers, Following). - Inline bio editing using InputTextArea with @bind-Value. - Simple tabbed navigation UI for Posts/Photos/Videos (static buttons). - Responsive post grid showing image cards using a Tailwind grid. ## Key components - UserProfileModel (POCO data model) - InputTextArea (Blazor input component) - @bind-Value for two-way binding - foreach rendering for post cards - Standard HTML buttons and nav elements ## How it works - The page instantiates a UserProfileModel and binds properties to UI elements (e.g., Profile.Name, Profile.Bio). - Bio editing toggles Profile.IsEditing; InputTextArea uses @bind-Value to update the model in-memory. - Posts are generated with a simple Enumerable.Range loop and rendered into a responsive grid. - Navigation tab buttons are static; switching behavior would require state (not implemented). ## Styling - Uses Tailwind utility classes across the layout (min-h-screen, bg-gray-100, flex, grid, md: prefixes). - Avatar uses rounded-full and border classes; images use object-cover for consistent cropping. - Responsive behavior via Tailwind breakpoints (sm:, md:, lg:) and grid-cols utilities. - Icon usage relies on Font Awesome class names (e.g., fas fa-map-marker-alt) which requires including the icon library separately. ## Reuse steps 1. Add the UserProfileModel class to the project and include the UserProfile.razor component under Pages or Components. 2. Ensure Tailwind CSS is configured or include equivalent utility styles in site CSS. 3. Import Microsoft.AspNetCore.Components.Forms if using InputTextArea inside forms; InputTextArea works with @bind-Value. 4. Add Font Awesome or swap the icon markup for a preferred icon set. 5. Replace placeholder images/strings with real data and wire up services or APIs to load/save profile data. ## Limitations & next steps - No EditForm or DataAnnotationsValidator is used; validation and structured form handling are not implemented. - Data persistence, authentication, follow/message actions, and tab switching state are not wired to services and remain client-only. - Replace static post generation with a posts API or injected service for real content, and add EditForm + validation for bio/profile edits. - Consider extracting the header, stats and post card into reusable components for composition and testing.